<template>
  <div class="smtpServe">
    <a-form
      :form="form"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 12 }"
      @submit="handleSubmit"
    >
      <a-form-item>
        <p>SMTP地址</p>
        <a-input v-decorator="['smtpHost']" />
      </a-form-item>
      <a-form-item>
        <p>SMTP 端口（强制使用 SSL 连接）</p>
        <a-input v-decorator="['smtpPort']" />
      </a-form-item>
      <a-form-item>
        <p>SMTP用户</p>
        <a-input v-decorator="['smtpUser']" />
      </a-form-item>
      <a-form-item>
        <p>SMTP密码</p>
        <a-input v-decorator="['smtpPass']" />
      </a-form-item>
      <a-form-item>
        <p>发件人</p>
        <a-input v-decorator="['smtpFromUser']" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
        <a-button type="primary" html-type="submit"> 保存 </a-button>
        <a-button @click="headletest"> 测试 </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { Message } from "element-ui";
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: "coordinated" }),
    };
  },
  mounted() {
    this.GetSetting();
    this.$nextTick(() => {
      const { setFieldsValue } = this.form;
      setFieldsValue(this.settingList);
    });
  },
  computed: {
    ...mapState({
      settingList: (state) => state.setting.settingList,
    }),
  },
  methods: {
    ...mapActions({
      PostSetting: "setting/PostSetting",
      GetSetting: "setting/GetSetting",
    }),
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        console.log("Received values of form: ", values);
        this.PostSetting(values);
      });
    this.GetSetting();
        const { setFieldsValue } = this.form;
        setFieldsValue(this.settingList);
    },
    headletest() {
      Message.error("邮件发送失败");
    },
  },
};
</script>

<style></style>
